<template>
	<div class="bim-wrap">
		<div class="bimface-container" id="BIMContainer" v-loading="dialog.loading">
			<div class="bimface-dialog" v-if="dialog.show">
				<div class="bimface-dialog-title">
					<span>{{ dialog.title }}</span>
					<i @click="dialog.show = false" class="icon-close el-icon-close"></i>
				</div>
				<div class="bimface-dialog-content">
					<div class="radio-wrap">
						<div>
							<span>有效期：</span>
							<input :value="7" @change="onShare" id="7" name="days" type="radio" v-model="dialog.days" />
							<label for="7">7天</label>
							<input :value="14" @change="onShare" id="14" name="days" type="radio" v-model="dialog.days" />
							<label for="14">14天</label>
							<input :value="null" @change="onShare" id="null" name="days" type="radio" v-model="dialog.days" />
							<label for="null">永久</label>
						</div>
						<span @click="onCopy" class="copy">复制链接</span>
					</div>
					<div id="QRCode"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import api from './api'
import QRCode from 'qrcodejs2'
export default {
	props: {
		projectId: [String, Number],
		projectName: String
	},
	data() {
		return {
			showContent: false,
			dialog: {
				show: false,
				loading: false,
				title: '分享',
				days: 7,
				qrcode: null,
				linkUrl: ''
			},
			bimfaceApp: null, // bimface实例
			activeItem: {},
			bimList: []
		}
	},
	watch: {
		projectId: {
			immediate: true,
			handler(val) {
				if (!val) return
				this.destroy()
				this.getBIMList()
			}
		}
	},
	beforeDestroy() {
		this.destroy()
	},
	methods: {
		destroy() {
			if (this.bimfaceApp) {
				if (this.bimfaceApp.destroy) {
					this.bimfaceApp.destroy()
				} else {
					const container = document.getElementById('BIMContainer')
					const content = container.querySelector('.bf-drawing-wrap')
					container.removeChild(content)
				}
				this.bimfaceApp = null
			}
		},
		async getBIMList() {
			const token = await api.queryBIMViewToken({ projectId: this.projectId })
			this.BIMLoader(token)
		},
		// 加载BIM模型
		BIMLoader(token) {
			// if (this.activeItem.id === item.id) return
			// this.activeItem = item
			// this.$emit('change', item)

			this.showContent = false
			this.dialog.show = false
			this.dialog.loading = true

			// 先销毁旧的模型
			this.destroy()

			// 设置BIMFACE JSSDK加载器的配置信息
			const loaderConfig = new BimfaceSDKLoaderConfig()
			loaderConfig.viewToken = token

			console.log(token)

			// 加载BIMFACE JSSDK加载器
			BimfaceSDKLoader.load(
				loaderConfig,
				viewMetaData => {
					let Config, Application, ViewAddedEventName, ViewAddedEvent
					switch (viewMetaData.viewType) {
						case 'drawingView':
							Config = Glodon.Bimface.Application.WebApplicationDrawingConfig
							Application = Glodon.Bimface.Application.WebApplicationDrawing
							ViewAddedEventName = Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded
							ViewAddedEvent = (app, viewToken) => app.load(viewToken)
							break
						default:
							Config = Glodon.Bimface.Application.WebApplication3DConfig
							Application = Glodon.Bimface.Application.WebApplication3D
							ViewAddedEventName = Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded
							ViewAddedEvent = (app, viewToken) => app.addView(viewToken)
							break
					}

					// 创建WebAppConfig
					const WebAppConfig = new Config()
					WebAppConfig.Buttons.push('Share')
					WebAppConfig.domElement = document.getElementById('BIMContainer')

					// 创建WebApplication3D
					const app = new Application(WebAppConfig)
					ViewAddedEvent(app, viewMetaData.viewToken)
					this.dialog.loading = false
					// 保存实例，切换模型时调用销毁方法
					this.bimfaceApp = app

					// 添加模型
					const viewer = app.getViewer()
					// 设置工具栏
					viewer.addEventListener(ViewAddedEventName, () => {
						window.onresize = function () {
							viewer.resize(1, 1)
						}

						const btnConfig = new Glodon.Bimface.UI.Button.ButtonConfig()
						btnConfig.className += ' el-icon-share'
						const shareButton = new Glodon.Bimface.UI.Button.Button(btnConfig)
						const toolbar = app.getToolbar('MainToolbar')
						toolbar.addControl(shareButton)
						shareButton.addEventListener('Click', () => {
							this.onShare()
						})
					})
				},
				() => console.log('加载BIMFACE失败')
			)
		},
		async onShare() {
			this.dialog.show = true
			await api.getShareUrl({ id: this.activeItem.id, days: this.dialog.days })
			const url = new URL(`${location.origin}${location.pathname}share.html`)
			url.searchParams.set('fileId', this.activeItem.fileId)
			this.dialog.linkUrl = url.href
			console.log(url.href)
			this.$nextTick(() => {
				const QRCodeDom = document.getElementById('QRCode')
				QRCodeDom.innerHTML = ''
				this.dialog.qrcode = new QRCode(QRCodeDom, {
					text: this.dialog.linkUrl,
					correctLevel: QRCode.CorrectLevel.Q
				})
			})
		},
		onCopy() {
			const input = document.createElement('input')
			input.setAttribute('value', this.dialog.linkUrl)
			document.body.appendChild(input)
			input.select()
			document.execCommand('Copy')
			document.body.removeChild(input)
			this.$message.success('复制成功')
		}
	}
}
</script>
<style lang="scss" scoped>
.bim-wrap {
	display: flex;
	height: 100%;
	width: 100%;
	background: #d6e0ec;
	.bim-list {
		flex-shrink: 0;
		position: relative;

		&-control {
			position: absolute;
			right: 0;
			top: 50%;
			z-index: 1000;
			transform: translate(100%, -50%);
			background: #fff;
			height: 300px;
			line-height: 300px;
			cursor: pointer;
			clip-path: polygon(100% 25%, 100% 75%, 0 100%, 0 0);
		}
		&-content {
			height: 100%;
			overflow: auto;
			font-size: 50px;
			line-height: 1.5;
			background: #fff;
			width: 0;
			transition: all 0.3s;
			&.active {
				width: 500px;
			}
			li {
				cursor: pointer;
				padding: 50px 30px;
				&.active {
					background: #d6e0ec;
				}
			}
		}
	}
	.bimface-container {
		flex: 1;
		overflow: hidden;
		.bimface-dialog {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
			background: rgba($color: #000000, $alpha: 0.8);
			font-size: 50px;
			color: #fff;

			&-title {
				font-size: 60px;
				line-height: 200px;
				border-bottom: 1px solid #666;
				background-color: rgba(0, 0, 0, 0.88);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 50px;
				.icon-close {
					font-size: 100px;
					cursor: pointer;
				}
			}
			&-content {
				padding: 0 100px 100px;
				.radio-wrap {
					height: 200px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					input[type='radio'] {
						margin: 0;
						width: 50px;
						height: 50px;
						margin: 0 20px 0 50px;
					}
					label {
						cursor: pointer;
					}
					.copy {
						margin-left: 100px;
						float: right;
						cursor: pointer;
						&:hover {
							color: #11dab7;
						}
					}
				}
				#QRCode {
					display: flex;
					justify-content: center;
				}
			}
		}
	}
}
</style>
